<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
    <head>
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css" />
    </head>


    <body class="ui-mobile-viewport ui-overlay-e">

        <div id="UserAccountPage" data-url="UserAccountPage" data-role="page" data-theme="d" >
            <div data-role="header" data-theme="d">
                <h1>User Account</h1>
            </div>

            <div id="formContent" data-role="content">
                <span id="useraccount-page">
                    <div data-role="fieldcontain">
                        <label for="txtUsername">Username:</label>
                        <input type="text" name="username" id="txtUsername" placeholder="e.g.'pushupcholic'"/>
                    </div>
                     <div id="userEmail" data-role="fieldcontain">
                         <label for="txtEmail">Email:</label>
                         <input type="text" name="txtEmail" id="txtEmail" placeholder="email used for gravatar" />
                     </div>
                    <canvas hidden="true" id="profileImage"> </canvas>
                </span>
            </div>

            <div class="data-role-footer" data-role="footer">
                <div class="ui-navbar" data-role="navbar" role="navigation">
                    <ul>
                        <li><a onclick="useraccountcontroller.setPhotoFromGravatar();
                               useraccountcontroller.saveUserData();
                               $.mobile.changePage( 'initialtest.html', { transition: 'slide', changeHash: false });"
                               data-theme="d" data-icon="arrow-r">Next</a></li>
                    </ul>
                </div>
            </div>
            
        </div>

        <!--<script type="text/javascript" src="phonegap.js"></script>-->
        <script type="text/javascript" src="js/jquery-2.0.3.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
        <script type="text/javascript" src="js/Helpers/md5.js"></script>
        <script type="text/javascript" src="js/Controllers/useraccountcontroller.js"></script>

    </body>
</html>
